<template>
  <div class="m-choose-icon-dialog-body-height">
    <el-button @click="handleClick" type="primary">
      <slot></slot>
    </el-button>
    <el-dialog :title="title" v-model="currentVisible" >
      <div class="container" style="height: 460px;"> 
      <el-input v-model="iconName" style="width: 240px" placeholder="Please input" />
      <el-scrollbar height="500px" style="margin-top: 5px;" >
        <div
          class="item"
          v-for="(item, index) in filterIcons"
          :key="index"
          @click="clickItem(item)"
        >
          <div>
            <!-- 动态组件 -->
            <component :is="`el-icon-${toLine(item)}`"></component>
          </div>
          <div>{{ item }}</div>
        </div>
      </el-scrollbar>
      </div> 
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, computed } from "vue";
import * as ElIcons from "@element-plus/icons-vue";
import { toLine } from "utils/index";
import { useCopy } from "@/hooks/useCopy/useCopy";

console.log(Object.keys(ElIcons));

const iconName = ref("");

const filterIcons = computed(() => {
  if (iconName.value === "") return Object.keys(ElIcons);
  return Object.keys(ElIcons).filter(
    (item) => item.indexOf(iconName.value) > -1
  );
});

//弹出框的标题
const title = defineModel("title");

// 弹出框的显示
// 这种定义,可以自动串联祖, 父, 子的这个值,都是一个响应式
// 视频中通过 emits在点击时改变,但是关闭时emits过来,但是当前组件只有watch才能知道数据变了, 但是也没透传上去
// 这就是defineModel的好处了, 自动传递给祖组件
// 主要是响应式的传递是从到下自动变化, 但是反向要事件发送才能变更,不能直接改父组件的属性
// 所以定义currentVisible 来解开两个, 然后在watch中再进行传递
// 渡一课提到的单向数据流,  子组件里面的组件不能直接改变父组件的的属性
let visible = defineModel("visible");
console.log("==", visible.value);

let currentVisible = ref(visible.value);

// let emits = defineEmits(['update:visible'])
// 点击 通知父组件修改值
const handleClick = () => {
  visible.value = !visible.value;
  // emits('update:visible',!visible.value)
};

const clickItem = (item: string) => {
  const text = `<el-icon-${toLine(item)} />`;
  console.log(text);
  useCopy(text);
  currentVisible.value = false;
};

// 监听父组件值变化更新自己的值
watch(
  () => visible.value,
  (newVal, old) => {
    currentVisible.value = visible.value;
    console.log(old, newVal);
  }
);

// 监听自己的值变化, 通知父组件
watch(
  () => currentVisible.value,
  (newVal, old) => {
    visible.value = currentVisible.value;
    console.log(old, newVal);
  }
);
</script>
<style scoped lang="scss">
// .container {
//   display: flex;
//   flex-wrap: wrap;
//   justify-content: space-between;
//   align-items: center;
 
// }
.item {
    width: 25%;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    cursor: pointer;
    svg {
      width: 2em;
      height: 2em;
    }
  }
</style>
